<template>
	<view class="content-body">
		<view class="view-title">
			{{detailInfo.title}}
		</view>
		<view class="view1 tn-margin-bottom">
			<text class="viewfaburen">{{detailInfo.createdUser}}发布</text>
			<text class="viewbanji">{{detailInfo.className}}</text>
			<text class="renwustatus" >{{detailInfo.stateStr}}</text>
			
			<view class="tn-padding-top-sm tn-padding-sm">
				<text class="click-text" v-if="isShowEditBtn" @click="xiugai">修改</text>
				<text class="empty-text" v-if="isShowEditBtn"> </text>
				<text class="click-text" @click="zaicifabu">再次发布</text>
				<text class="tn-icon-delete" @click="deleteFunction"></text>
			</view>
		</view>
		<view class="view2 tn-margin-bottom">
			<view class="tn-padding-left-sm tn-margin-bottom-sm">
				<text class="color-title">任务时间</text>
				<text class="tn-padding-left">{{detailInfo.startDate}}至{{detailInfo.endDate}}</text>
			</view>
			<view class="tn-padding-left-sm tn-margin-bottom-sm">
				<text class="color-title">每日打卡截止时间</text>
				<text class="tn-padding-left">{{detailInfo.dailyClockInDeadline}}</text>
			</view>
			<view class="tn-padding-left-sm tn-margin-bottom-sm">
				<view class="in-title">
					任务介绍
				</view>
				<view class="renwujieshao">
					{{detailInfo.taskIntroduction}}
				</view>
				<view class="renwujieshao-tu">
					<img src="https://img1.baidu.com/it/u=946811137,302769443&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1669309200&t=f41038b274ad95001481ff67599c99e2" alt="">
				</view>
			</view>
		</view>
		<view class="view3">
			<view class="in-title tn-padding-left-sm tn-padding-right-sm tn-padding-bottom-sm">
				班级完成情况
				<text class="yi-ti-txt">已提交： {{detailInfo.count}}人 ></text>
			</view>
			<view class="wancheng-list-item  tn-padding-left-sm tn-padding-right-sm" v-for="(item, index) in wanchengList" :key="index">
				<view class="avatar-item">
					<tn-avatar size="sm" v-if="item.parentImgId" :src="item.parentImgUrl"></tn-avatar>
					<tn-avatar v-else size="sm" src="https://img1.baidu.com/it/u=946811137,302769443&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1669309200&t=f41038b274ad95001481ff67599c99e2"></tn-avatar>
				</view>
				<view class="info-right">
					<view class="tn-margin-bottom-sm">
						<text>{{item.createUserName}}</text>
						<span class="tn-float-right">{{item.clockInTimes}}</span>
					</view>
					<view class="tn-margin-bottom-sm">
						{{item.content}}
					</view>
					<view class="tn-margin-bottom-sm blogger__item">
						<block v-if="item.images">
						  <view v-if="[1,2,4].indexOf(item.images.length) != -1" class="tn-padding-top-xs">
						    <image v-for="(image_item,image_index) in item.images" :key="image_index" @click="showImage(item,image_item)"
						      class="blogger__main-image"
						      :class="{
						        'blogger__main-image--1 tn-margin-bottom-sm': item.images.length === 1,
						        'blogger__main-image--2 tn-margin-right-sm tn-margin-bottom-sm': item.images.length === 2 || item.images.length === 4
						      }"
						      :src="image_item.src"
						      mode="aspectFill"
						    ></image>
						  </view>
						  <view v-else class="tn-padding-top-xs">
						    <tn-grid  hoverClass="none" :col="3">
						      <block v-for="(image_item,image_index) in item.images" :key="image_index">
						        <!-- #ifndef MP-WEIXIN -->
						        <tn-grid-item style="width: 30%;margin: 10rpx;">
						          <image
						            class="blogger__main-image blogger__main-image--3" @click="showImage(item,image_item)"
						            :src="image_item.src"
						            mode="aspectFill"
						          ></image>
						        </tn-grid-item>
						        <!-- #endif-->
						        <!-- #ifdef MP-WEIXIN -->
						        <tn-grid-item style="width: 30%;margin: 10rpx;">
						          <image
						            class="blogger__main-image blogger__main-image--3" @click="showImage(item,image_item)"
						            :src="image_item.src"
						            mode="aspectFill"
						          ></image>
						        </tn-grid-item>
						        <!-- #endif-->
						      </block>
						    </tn-grid>
						  </view>
						</block>
					</view>
				</view>
			</view>
		</view>
		<view v-if="previewImg" class="image-check-view tn-flex tn-flex-col-center" @click="previewImg=''">
			<image class="tn-width-full" :src="previewImg" mode="widthFix"></image>
			<text class="tn-icon-close" @click="previewImg=''"></text>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warn" cancelText="关闭" confirmText="确认" title="通知" :content="popupMsg" @confirm="dialogConfirm"
							@close="dialogClose"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	
	export default {
		name: 'youerruyuan',
		data(){
			return {
				renwuStatus: 1,
				renwuList: [1,2,3],
				wanchengList: [
					
				],
				previewImg: '',
				imageTitle: '',
				detailId: '',
				detailInfo: {},
				popupMsg: ''
			}
		},
		onLoad:function(options){
		    console.log(options.id);   // 2
			this.detailId = options.id
		},
		computed:{
			isShowEditBtn(){
				if(this.detailInfo.stateEnum == 2 || this.wanchengList.length){
					return false
				}
				return true
			}
		},
		onShow() {
			this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
			this.getrenwuDetail()
		},
		mounted() {
			this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
		},
		methods: {
			showImage(item,image_item){
				
				this.previewImg = image_item.src;
			},
			xiugai(){
				uni.navigateTo({
					url: '/pagesA/yuanwuduan/faburenwu?id='+this.detailId
				})
			},
			zaicifabu(){
				uni.navigateTo({
					url: '/pagesA/yuanwuduan/faburenwu?id='+this.detailId+'&zaicifabu=1'
				})
			},
			getrenwuDetail(){
				if(!this.detailId){
					return
				}
				this.request({
					url: '/ParentChildTasks/Preview',
					method: 'get',
					params: {
						id: this.detailId
					},
				}).then(res => {
					if(res.code == 200){
						this.wanchengList = [];
						this.detailInfo = res.data.parentChildTasksInfo
						res.data.recodeList.forEach(item => {
							if(item.images && item.images.length){
								item.images.forEach(_img => {
									_img['src'] = this.imageTitle + _img.filedId;
								})
							}
							if(item.parentImgId){
								item.parentImgUrl = this.imageTitle + item.parentImgId;
							}
							this.wanchengList.push(item)
						})
						
					}
				})
			},
			deleteFunction(){
				this.popupMsg = '删除任务也将删除关联数据，确认删除？'
				this.$refs.alertDialog.open()
			},
			dialogConfirm(){
				let postData = [
					{id: this.detailId}
				]
				  this.request({
					url: '/ParentChildTasks/Delete',
					method: 'post',
					params: postData
				  }).then(res => {
					  if(res.code == 200){
						  this.$refs.alertDialog.close()
						  uni.navigateBack()
					  }else{
						  this.$refs.toast.show({
						    title: '',
						    content: res.message,
						    icon: 'fail',
						    image: '',
						    duration: 1500
						  })
					  }
				  })
				
			},
			dialogClose(){this.$refs.alertDialog.close()}
		}
	}
</script>

<style lang="scss" scoped>
	.view-title{
		font-weight: 550;
		color: black;
		margin-left: 20rpx;
		margin-bottom: 20rpx;
	}
	.view1{
		padding-bottom: 10rpx;
		border-bottom: 2px dotted #000000;
		color: #333333;
		width: 100%;
		margin-bottom: 20rpx;
		.tn-icon-delete{
			float: right;
			padding-right: 10px;
			font-size: 32rpx;
		}
	}
	.viewfaburen{
		margin-right: 10px;
		margin-left: 20rpx;
	}
	.viewbanji{
		
	}
	.renwustatus{
		color: #cccccc;
		float: right;
		margin-right: 20rpx;
	}
	.in-title{
		font-weight: 550;
		margin-bottom: 10rpx;
		.yi-ti-txt{
			float: right;
			color: #888888;
			font-size: 24rpx;
		}
	}
	.renwujieshao{
		height: 130rpx;
		width: calc(100% - 222rpx);
		box-sizing: border-box;
		float: left;
		display:inline-block;
		white-space: pre-wrap;
		word-wrap: break-word;
	}
	.renwujieshao-tu{
		width: 200rpx;
		height: 130rpx;
		box-sizing: border-box;
		float: right;
		margin-right: 20rpx;
		img{
			max-width: 100%;
			height: auto;
		}
	}
	.view2{
		overflow: hidden;
		padding-bottom: 20rpx;
		border-bottom: 2px dotted #000000;
	}
	.view3{
		
			overflow: hidden;
			padding-bottom: 20rpx;
	}
	.renwu-list-item{
		width: 60rpx;
		height: 60rpx;
		background-color: #dddddd;
		text-align: center;
		line-height: 60rpx;
		border-radius: 30rpx;
		float: left;
		margin: 20rpx;
	}
	.activeItem{
		background-color: chartreuse;
		position: relative;
		.active-item-view{
			.active-item-text{
				height: 12rpx;
				line-height: 12rpx;
				position: absolute;
				top: 15rpx;
				left: 40%;
				font-size: 25rpx;
			}
			.tn-icon-success{
				height: 12rpx;
				line-height: 12rpx;
				position: absolute;
				bottom: 14rpx;
				left: 30%;
				font-size: 16px;
			}
		}
	}
	.wancheng-list-item{
		width: 100%;
	}
	.avatar-item{
		width: 60rpx;
		float: left;
	}
	.info-right{
		margin-left: 70rpx;
		width: calc(100% - 70rpx);
	}
	
		  .image-check-view{
			  position: fixed;
			  top: 0;
			  left: 0;
			  right: 0;
			  bottom: 0;
			  z-index: 2;
			  background-color: rgba(255, 255, 255, 1);
			  .tn-icon-close{
				  position: absolute;
				  top: 10px;
				  right: 10px;
				  font-size: 36rpx;
				  z-index: 888;
			  }
		  }
	
	/* 文章内容 start*/
  .blogger {
    &__item {
      padding: 30rpx;
    }
    
    &__author {
      &__btn {
        margin-right: -12rpx;
        opacity: 0.5;
      }
    }
    
    &__desc {
      line-height: 55rpx;
      
      &__label {
        padding: 0 20rpx;
        margin: 0rpx 18rpx 0 0;
        
        &--prefix {
          color: #00FFC8;
          padding-right: 10rpx;
        }
      }
      &__content {
        
      }
    }
    
    &__content {
      margin-top: 18rpx;
      padding-right: 18rpx;
      
      &__data {
        line-height: 46rpx;
        text-align: justify;
        overflow: hidden;
        transition: all 0.25s ease-in-out;
      }
      
      &__status {
        margin-top: 10rpx;
        font-size: 26rpx;
        color: #82B2FF;
      }
    }
    
    &__main-image {
      border-radius: 16rpx;
      
      &--1 {
        max-width: 80%;
        max-height: 300rpx;
      }
      
      &--2 {
        max-width: 260rpx;
        max-height: 260rpx;
      }
      
      &--3 {
        height: 212rpx;
        width: 100%;
      }
    }
    
    &__count-icon {
      font-size: 40rpx;
      padding-right: 5rpx;
    }
    
    &__ad {
      width: 100%;
      height: 500rpx;
      transform: translate3d(0px, 0px, 0px) !important;
      
      ::v-deep .uni-swiper-slide-frame {
        transform: translate3d(0px, 0px, 0px) !important;
      }
      .uni-swiper-slide-frame {
        transform: translate3d(0px, 0px, 0px) !important;
      }
      
      &__item {
        position: absolute;
        width: 100%;
        height: 100%;
        transform-origin: left center;
        transform: translate3d(100%, 0px, 0px) scale(1) !important;
        transition: transform 0.25s ease-in-out;
        z-index: 1;
        
        &--0 {
          transform: translate3d(0%, 0px, 0px) scale(1) !important;
          z-index: 4;
        }
        &--1 {
          transform: translate3d(13%, 0px, 0px) scale(0.9) !important;
          z-index: 3;
        }
        &--2 {
          transform: translate3d(26%, 0px, 0px) scale(0.8) !important;
          z-index: 2;
        }
      }
      
      &__content {
        border-radius: 40rpx;
        width: 640rpx;
        height: 500rpx;
        overflow: hidden;
      }
      
      &__image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .empty-text{
	  display: inline-block;
	  width: 30rpx;
  }
  .click-text{
	  color: #01BEFF;
  }
	.color-title{
		font-weight: 550;
	}
</style>